﻿define(['jquery', 'bootstrap', 'backend', 'table', 'form', 'ai-helper'], function ($, undefined, Backend, Table, Form, AiHelper) {

    var Controller = {
        index: function () {
            // 引入通用的城市学校过滤JS文件
            var script = document.createElement('script');
            script.src = '/assets/js/backend/common/index.js';
            document.head.appendChild(script);
            
            // 初始化表格参数配置
            Table.api.init({
                extend: {
                    index_url: 'slider_imgs/sliderimgs/index',
                    add_url: 'slider_imgs/sliderimgs/add',
                    edit_url: 'slider_imgs/sliderimgs/edit',
                    multi_url: 'slider_imgs/sliderimgs/multi',
                    del_url: 'slider_imgs/sliderimgs/del',
                    table: 'fa_slider_imgs',
                }
            });

            var table = $("#table");

            // 初始化表格
            table.bootstrapTable({
                url: $.fn.bootstrapTable.defaults.extend.index_url,
                escape: false,
                pk: 'id',
                sortName: 'id',
                columns: [
                    [
                        {checkbox: true},
                        {field: 'id', title: __('Id')},
                        { field: "city_id", title: "城市" },
                        { field: "school_id", title:"学校"},
                        {field: 'src', title: __('title'), formatter: function(value, row, index) {
                                return "<a href='"+value+"'><img class='tableimg' style='max-height:100px;' src='"+value + "'>";
                            }},
                        {field: 'number', title: '位置编号'},
                        {field: 'title', title: '图片标题'},
                        {field: 'operate', title: __('Operate'), table: table, events: Table.api.events.operate, formatter: Table.api.formatter.operate}
                    ]
                ]
            });

            // 为表格绑定事件
            Table.api.bindevent(table);
        },
        add: function () {
            // 初始化AI助手
            if (typeof AiHelper !== 'undefined') {
                AiHelper.init();
            }

            var script = document.createElement('script');
            script.src = '/assets/js/backend/common/add.js?';
            document.head.appendChild(script);
            Controller.api.bindevent();
            Controller.api.initImageGroups('add');
        },
        edit: function () {
            // 初始化AI助手
            if (typeof AiHelper !== 'undefined') {
                AiHelper.init();
            }
            var script = document.createElement('script');
            script.src = '/assets/js/backend/common/add.js?';
            document.head.appendChild(script);
            Controller.api.bindevent();
            Controller.api.initImageGroups('edit');
        },
        api: {
            bindevent: function ($form) {
                // 监听selectpage数据加载完成后自动选择第一个可用选项
                var $numberInput = $("input[name='row[number]']");
                if ($numberInput.length) {
                    var selectPageHandler = function() {
                        if (!$numberInput.val().trim()) {
                            setTimeout(function() {
                                // 查找下拉菜单结果区域
                                var $resultArea = $('.sp_result_area');
                                var $firstItem = $resultArea.find('li[pkey]:first');
                                
                                if ($firstItem.length) {
                                    var selectedValue = $firstItem.attr('pkey');
                                    var selectedText = $firstItem.attr('title');
                                    
                                    if (selectedValue) {
                                        $numberInput.val(selectedValue).trigger('change');
                                        
                                        // 更新显示文本（如果有对应的显示元素）
                                        var $display = $numberInput.siblings('input[readonly]');
                                        if ($display.length) {
                                            $display.val(selectedText);
                                        }
                                        
                                        layer.closeAll('msg');
                                        layer.msg('已自动选择位置编号: ' + selectedText, {icon: 1, time: 2000});
                                    }
                                } else {
                                    // 如果没有找到选项，延迟重试
                                    setTimeout(selectPageHandler, 300);
                                }
                            }, 200);
                        }
                    };
                    
                    // 绑定事件（可能需要根据实际组件调整事件名称）
                    $(document).on('shown.bs.selectpage', selectPageHandler);
                    
                    // 初始加载时检查
                    setTimeout(selectPageHandler, 500);
                }

                // 原有表单绑定逻辑
                Form.api.bindevent($form || $("form[role=form]"), function(data, ret) {
                    // 使用更明确的成功提示配置
                    if (ret && ret.msg) {
                        layer.msg(ret.msg, {
                            icon: 1,        // 成功图标
                            time: 2000,     // 显示时间
                            skin: 'layer-ext-moon',  // 可选：使用特定皮肤
                            shade: false    // 不显示遮罩
                        });
                    } else {
                        layer.msg('操作成功', {
                            icon: 1,
                            time: 2000,
                            skin: 'layer-ext-moon',
                            shade: false
                        });
                    }
                    return true;
                }, null, function() {
                    if (window.location.href.indexOf('/add') > -1) {
                        Controller.api.reorderFormInputs();
                    }
                    
                    return true;
                });
            },
            formatter:{

            },
            // 初始化图片组管理功能
            initImageGroups: function(mode) {
                var imageCount = mode === 'add' ? 1 : 0;
                var maxImages = 5;
                var currentNumber = mode === 'edit' ? $("input[name='row[number]']").val() : '';

                // 图片组模板函数（用于编辑模式）
                function getImageGroupTemplate(index, data) {
                    data = data || {};
                    var hiddenIdField = mode === 'edit' ?
                        `<input type="hidden" name="images[${index}][id]" value="${data.id || ''}" />` : '';

                    return `
                        <div class="slider-image-group" data-index="${index}">
                            <div class="panel panel-info">
                                <div class="panel-heading">
                                    <h5 class="panel-title">
                                        <i class="fa fa-image"></i> 图片 ${index}
                                        <button type="button" class="btn btn-xs btn-danger pull-right remove-image-group" style="margin-top: -2px;">
                                            <i class="fa fa-trash"></i> 删除
                                        </button>
                                    </h5>
                                </div>
                                <div class="panel-body">
                                    <div class="row">
                                        <div class="col-md-4">
                                            <div class="form-group">
                                                <label class="control-label">图片标题:</label>
                                                <input type="text" name="images[${index}][title]" class="form-control" placeholder="请输入图片标题" data-tip="图片标题" value="${data.title || ''}" />
                                                ${hiddenIdField}
                                            </div>
                                        </div>
                                        <div class="col-md-4">
                                            <div class="form-group">
                                                <label class="control-label">图片链接:</label>
                                                <input type="text" name="images[${index}][href]" class="form-control" placeholder="请输入图片链接" data-tip="图片链接" value="${data.href || ''}" />
                                            </div>
                                        </div>
                                        <div class="col-md-4">
                                            <div class="form-group">
                                                <label class="control-label">图片地址:</label>
                                                <div class="input-group">
                                                    <input type="text" name="images[${index}][src]" class="form-control image-src-input" placeholder="请选择图片" data-tip="图片地址" value="${data.src || ''}" id="images-${index}-src" />
                                                    <div class="input-group-btn">
                                                        <button type="button" class="btn btn-danger plupload" data-input-id="images-${index}-src"  data-width="750" data-height="422" data-mimetype="image/*" data-multiple="false" data-preview-id="p-images-${index}">
                                                            <i class="fa fa-upload"></i>
                                                        </button>
                                                        <button type="button" class="btn btn-success collect-btn" data-group-index="${index}">
                                                            <i class="fa fa-download"></i> 抓取
                                                        </button>
                                                    </div>
                                                </div>
                                                <ul class="row list-inline plupload-preview" id="p-images-${index}" style="margin-top: 10px;"></ul>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    `;
                }

                // 更新图片计数显示
                function updateImageCount() {
                    $('#image-count').text(imageCount);
                    if (imageCount >= maxImages) {
                        $('#add-image-group').prop('disabled', true).addClass('disabled');
                    } else {
                        $('#add-image-group').prop('disabled', false).removeClass('disabled');
                    }
                }

                // 添加图片组（编辑模式）
                function addImageGroup(data) {
                    if (imageCount < maxImages) {
                        imageCount++;
                        var $newGroup = $(getImageGroupTemplate(imageCount, data));
                        $('#slider-images-container').append($newGroup);

                        // 初始化上传组件
                        $newGroup.find('.plupload').each(function() {
                            if (typeof Fast !== 'undefined' && Fast.api && Fast.api.upload) {
                                Fast.api.upload.init($(this));
                            }
                        });
                        // 绑定抓取按钮事件
                        $newGroup.find('.collect-btn').off('click').on('click', Controller.api.handleCollect);

                        updateImageCount();
                        return $newGroup;
                    }
                    return null;
                }

                // 添加模式的图片组显示/隐藏
                function showImageGroup(index) {
                    $('.slider-image-group[data-index="' + index + '"]').show();

                    // 重新初始化上传组件
                    var $group = $('.slider-image-group[data-index="' + index + '"]');
                    $group.find('.plupload').each(function() {
                        if (typeof Fast !== 'undefined' && Fast.api && Fast.api.upload) {
                            Fast.api.upload.init($(this));
                        }
                    });
                    // 绑定抓取按钮事件
                    $group.find('.collect-btn').off('click').on('click', Controller.api.handleCollect);
                }

                // 添加图片按钮事件
                $('#add-image-group').click(function() {
                    if (mode === 'add') {
                        // 添加模式：显示下一个隐藏的图片组
                        if (imageCount < maxImages) {
                            imageCount++;
                            showImageGroup(imageCount);
                            updateImageCount();
                        }
                    } else {
                        // 编辑模式：动态创建新的图片组
                        addImageGroup();
                    }
                });

                // 删除图片组事件
                $(document).on('click', '.remove-image-group', function() {
                    var $group = $(this).closest('.slider-image-group');
                    var index = $group.data('index');

                    if (imageCount > 1) {
                        if (mode === 'add') {
                            // 添加模式：隐藏并清空表单数据
                            $group.hide();
                            $group.find('input[type="text"]').val('');
                            $group.find('.plupload-preview').empty();

                            // 重新计算显示的图片数量
                            imageCount = $('.slider-image-group:visible').length;
                        } else {
                            // 编辑模式：直接移除元素
                            $group.remove();
                            imageCount--;
                        }
                        updateImageCount();
                    } else {
                        layer.msg('至少需要保留一个图片组', {icon: 2});
                    }
                });

                // 编辑模式：加载现有数据
                function loadExistingImages() {
                    if (currentNumber) {
                        $.ajax({
                            url: Fast.api.fixurl('slider_imgs/sliderimgs/getImagesByNumber'),
                            type: 'POST',
                            data: {number: currentNumber},
                            dataType: 'json',
                            success: function(response) {
                                if (response.code === 1 && response.data && response.data.length > 0) {
                                    // 加载现有图片数据
                                    $.each(response.data, function(index, item) {
                                        addImageGroup(item);
                                    });
                                } else {
                                    // 没有现有数据，添加一个空的图片组
                                    addImageGroup();
                                }
                            },
                            error: function() {
                                // 错误时也添加一个空的图片组
                                addImageGroup();
                            }
                        });
                    } else {
                        // 没有位置编号，添加一个空的图片组
                        addImageGroup();
                    }
                }

                // 添加模式：修复上传组件的data-input-id属性并绑定抓取按钮
                function fixUploadInputIds() {
                    $('.plupload').each(function() {
                        var inputId = $(this).data('input-id');
                        if (inputId) {
                            var $input = $(this).closest('.form-group').find('input[type="text"]');
                            if ($input.length) {
                                $input.attr('id', inputId);
                            }
                        }
                    });
                    // 绑定抓取按钮事件
                    $('.collect-btn').off('click').on('click', Controller.api.handleCollect);
                }

                // 初始化
                if (mode === 'add') {
                    imageCount = 1;
                    updateImageCount();
                    fixUploadInputIds();
                } else if (mode === 'edit') {
                    // 编辑模式：加载现有图片数据
                    loadExistingImages();
                }

                // 添加全局Ctrl+V快捷键监听
                Controller.api.initGlobalPasteListener();
            },

            // 处理抓取请求
            handleCollect: function() {
                var $btn = $(this);
                var groupIndex = $btn.data('group-index');

                // 获取当前组的链接输入框
                var $hrefInput = $btn.closest('.slider-image-group').find('input[name*="[href]"]');
                var s_url = $hrefInput.val().trim();

                // 如果输入框为空，尝试从剪贴板获取链接
                if (!s_url) {
                    Controller.api.tryGetClipboardUrl(function(clipboardUrl) {
                        if (clipboardUrl) {
                            // 自动填入剪贴板中的链接并开始抓取
                            $hrefInput.val(clipboardUrl);
                            Controller.api.performCollect($btn, clipboardUrl);
                        } else {
                            // 剪贴板中没有有效链接，提示用户输入
                            layer.msg('请先在图片链接框中输入要抓取的网址', {icon: 2});
                            $hrefInput.focus();
                        }
                    });
                    return;
                }

                // 如果输入框有内容，直接抓取
                Controller.api.performCollect($btn, s_url);
            },

            // 尝试从剪贴板获取URL
            tryGetClipboardUrl: function(callback) {
                if (navigator.clipboard && navigator.clipboard.readText) {
                    // 现代浏览器的剪贴板API
                    navigator.clipboard.readText().then(function(text) {
                        var trimmedText = text.trim();
                        if (trimmedText && Controller.api.isValidUrl(trimmedText) && trimmedText.toLowerCase().startsWith('http')) {
                            callback(trimmedText);
                        } else {
                            callback(null);
                        }
                    }).catch(function(err) {
                        // 如果剪贴板访问失败，返回null
                        callback(null);
                    });
                } else {
                    // 不支持剪贴板API的浏览器
                    callback(null);
                }
            },

            // 执行抓取操作
            performCollect: function($btn, s_url) {
                // 验证URL格式
                if (!Controller.api.isValidUrl(s_url)) {
                    layer.msg('请输入正确的网址格式', {icon: 2});
                    return;
                }

                // 显示加载状态
                var originalText = $btn.html();
                $btn.html('<i class="fa fa-spinner fa-spin"></i> 抓取中...').prop('disabled', true);

                // 使用JSONP方式发送请求
                Controller.api.jsonpRequest({
                    url: 'https://collect.longsunhd.com/collect/index.php',
                    data: {
                        s_url: encodeURIComponent(s_url),
                        gather_type: 1
                    },
                    success: function(data) {
                        if (data) {
                            var $group = $btn.closest('.slider-image-group');

                            // 填入标题（过滤空格）
                            if (data.subject) {
                                var cleanTitle = data.subject.replace(/\s+/g, ' ').trim();
                                $group.find('input[name*="[title]"]').val(cleanTitle);
                            }

                            // 填入图片地址
                            if (data.thumb) {
                                // 处理thumb字段，如果是数组取第一个元素
                                var thumbValue = Array.isArray(data.thumb) ? data.thumb[0] : data.thumb;
                                $group.find('input[name*="[src]"]').val(thumbValue);
                            }

                            layer.msg('抓取成功！', {icon: 1});
                        } else {
                            layer.msg('抓取失败，返回数据格式错误', {icon: 2});
                        }
                    },
                    error: function(error) {
                        layer.msg('抓取失败：' + error, {icon: 2});
                    },
                    complete: function() {
                        // 恢复按钮状态
                        $btn.html(originalText).prop('disabled', false);
                    }
                });
            },

            // JSONP请求函数
            jsonpRequest: function(options) {
                var callbackName = 'jsonp_callback_' + Math.round(100000 * Math.random());
                var script = document.createElement('script');
                var params = [];

                // 添加callback参数
                options.data.callback = callbackName;

                // 构建参数字符串
                for (var key in options.data) {
                    if (options.data.hasOwnProperty(key)) {
                        params.push(encodeURIComponent(key) + '=' + encodeURIComponent(options.data[key]));
                    }
                }

                // 设置全局回调函数
                window[callbackName] = function(data) {
                    try {
                        if (options.success) {
                            options.success(data);
                        }
                    } catch (e) {
                        if (options.error) {
                            options.error(e.message);
                        }
                    } finally {
                        // 清理
                        document.head.removeChild(script);
                        delete window[callbackName];
                        if (options.complete) {
                            options.complete();
                        }
                    }
                };

                // 设置超时处理
                var timeout = setTimeout(function() {
                    if (window[callbackName]) {
                        if (options.error) {
                            options.error('请求超时');
                        }
                        document.head.removeChild(script);
                        delete window[callbackName];
                        if (options.complete) {
                            options.complete();
                        }
                    }
                }, 30000); // 30秒超时

                // 设置script标签
                script.src = options.url + '?' + params.join('&');
                script.onerror = function() {
                    clearTimeout(timeout);
                    if (window[callbackName]) {
                        if (options.error) {
                            options.error('网络错误');
                        }
                        document.head.removeChild(script);
                        delete window[callbackName];
                        if (options.complete) {
                            options.complete();
                        }
                    }
                };

                // 添加到页面
                document.head.appendChild(script);
            },

            // URL格式验证函数
            isValidUrl: function(string) {
                try {
                    new URL(string);
                    return true;
                } catch (_) {
                    return false;
                }
            },

            // 初始化全局粘贴监听器
            initGlobalPasteListener: function() {
                // 防止重复绑定
                $(document).off('keydown.sliderImgsPaste');

                $(document).on('keydown.sliderImgsPaste', function(e) {
                    // 检测Ctrl+V组合键
                    if (e.ctrlKey && e.keyCode === 86) {
                        // 检查是否在输入框中
                        var $target = $(e.target);
                        if ($target.is('input[type="text"], textarea')) {
                            // 如果在输入框中，不拦截，让正常粘贴生效
                            return;
                        }

                        // 防止默认粘贴行为
                        e.preventDefault();

                        // 执行自定义粘贴逻辑
                        Controller.api.handleGlobalPaste();
                    }
                });
            },

            // 处理全局粘贴事件
            handleGlobalPaste: function() {
                // 查找第一个空的图片组
                var $emptyGroup = Controller.api.findFirstEmptyGroup();

                if (!$emptyGroup) {
                    layer.msg('所有图片组都已有内容，请手动清空一个组或添加新组', {icon: 2});
                    return;
                }

                // 从剪贴板获取内容
                Controller.api.tryGetClipboardUrl(function(clipboardUrl) {
                    if (clipboardUrl) {
                        // 填入链接并执行抓取
                        var $hrefInput = $emptyGroup.find('input[name*="[href]"]');
                        var $collectBtn = $emptyGroup.find('.collect-btn');

                        $hrefInput.val(clipboardUrl);

                        // 执行抓取
                        Controller.api.performCollect($collectBtn, clipboardUrl);

                        // 显示提示
                        layer.msg('已自动填入链接并开始抓取', {icon: 1, time: 2000});
                    } else {
                        layer.msg('剪贴板中没有有效的链接', {icon: 2});
                    }
                });
            },

            // 查找第一个空的图片组
            findFirstEmptyGroup: function() {
                var $emptyGroup = null;

                $('.slider-image-group:visible').each(function() {
                    var $group = $(this);
                    var $hrefInput = $group.find('input[name*="[href]"]');
                    var $titleInput = $group.find('input[name*="[title]"]');
                    var $srcInput = $group.find('input[name*="[src]"]');

                    // 检查是否为空组（所有输入框都为空）
                    if (!$hrefInput.val().trim() && !$titleInput.val().trim() && !$srcInput.val().trim()) {
                        $emptyGroup = $group;
                        return false; // 跳出循环
                    }
                });

                return $emptyGroup;
            },

            // 重新整理表单输入框的name属性
            reorderFormInputs: function() {
                var index = 1;
                var visibleGroups = $('.slider-image-group:visible');
                // 遍历所有可见的图片组
                visibleGroups.each(function() {
                    var $group = $(this);
                    var originalIndex = $group.data('index');
                    // 更新输入框的name属性
                    var $titleInput = $group.find('input[name*="[title]"]');
                    var $hrefInput = $group.find('input[name*="[href]"]');
                    var $srcInput = $group.find('input[name*="[src]"]');

                    if ($titleInput.length > 0) {
                        var oldName = $titleInput.attr('name');
                        $titleInput.attr('name', 'images[' + index + '][title]');

                    }

                    if ($hrefInput.length > 0) {
                        var oldName = $hrefInput.attr('name');
                        $hrefInput.attr('name', 'images[' + index + '][href]');

                    }

                    if ($srcInput.length > 0) {
                        var oldName = $srcInput.attr('name');
                        $srcInput.attr('name', 'images[' + index + '][src]');

                    }

                    // 更新上传组件的data-input-id属性
                    var $uploadBtn = $group.find('.plupload');
                    if ($uploadBtn.length > 0) {
                        $uploadBtn.attr('data-input-id', 'images-' + index + '-src');
                        $uploadBtn.attr('data-preview-id', 'p-images-' + index);
                    }

                    // 更新预览容器ID
                    var $preview = $group.find('.plupload-preview');
                    if ($preview.length > 0) {
                        $preview.attr('id', 'p-images-' + index);
                    }

                    // 更新抓取按钮的data-group-index
                    var $collectBtn = $group.find('.collect-btn');
                    if ($collectBtn.length > 0) {
                        $collectBtn.attr('data-group-index', index);
                    }

                    index++;
                });



                // 输出最终的表单数据结构
                var formData = $('form[role="form"]').serializeArray();
            }
        }
    };
    return Controller;
});